<template>
	<view>
		<carHeader :title="'附近门店'"></carHeader>

		<view class="search">
			<input type="text" v-model="currentInputValue" placeholder="请输入需要搜索的内容" @input="onInput" />
			<image src="@/static/车联网服务-04汽车保养-02附近门店_slices/搜索.png" mode="" @click="onSearch"></image>
			<!-- <text class="icon-search"></text> -->
		</view>
		<view class="jl">
			<view v-if="searchHistory.length > 0" class="history-list">
				历史记录：
				<text class="history-item" v-for="(item, index) in searchHistory" :key="index"
					@click="onClickHistory(item)">
					{{ item }}
				</text>
			</view>
		</view>


		<view class="md">
			<view v-for="(item, index) in items" :key="index">
				<view class="info">
					<view class="line1">
						<text class="title" style="font-size: 16px;">车百事汽车生活馆</text>
						<text class="distance" style="color: blue;">{{ item.distance }}</text>
					</view>
					<view class="line2" style="width: 180px;">
						<view class="">
							<uni-rate size="17" :value="4" style="display: inline-block;" />
							<text class="rating">{{ item.rating }}分</text>
						</view>
						<text class="num">销量:{{ item.num }}</text>
					</view>
					<view class="line3">
						<image src="https://i1.hdslb.com/bfs/archive/780e3c1afbdea675446502f73f2f048685e5513b.jpg">
							<view class="ms">
								<view class="business-hours">营业时间:{{ item.businessHours }}</view>
								<view class="address">{{ item.address }}</view>
							</view>
					</view>
				</view>
			</view>
		</view>
		<uni-section title="改变组件状态" type="line">
			<radio-group class="uni-list" @change="onChange">
			</radio-group>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				maxSearchHistoryCount: 7,
				searchHistory: [],
				currentInputValue: '',
				items: [{
						distance: '556m',
						rating: '4',
						num: '556',
						address: '山阳区人民路与解放路交叉口',
						businessHours: '周一至周五 早8:00-晚22:00'
					},
					{
						distance: '556m',
						rating: '4',
						num: '556',
						address: '山阳区人民路与解放路交叉口',
						businessHours: '周一至周五 早8:00-晚22:00'
					}, {
						distance: '556m',
						rating: '4',
						num: '556',
						address: '山阳区人民路与解放路交叉口',
						businessHours: '周一至周五 早8:00-晚22:00'
					},
				]
			}
		},
		methods: {
			onInput(event) {
				this.currentInputValue = event.detail.value;
			},
			onSearch() {
				console.log(this.currentInputValue)
				if (this.currentInputValue.trim()) {
					let index = this.searchHistory.indexOf(this.currentInputValue);

					if (index !== -1) {
						this.searchHistory.splice(index, 1); // 移除已存在的条目
					}

					this.searchHistory.unshift(this.currentInputValue); // 添加到数组头部

					while (this.searchHistory.length > this.maxSearchHistoryCount) { // 如果超出最大数量，则移除最后一个条目
						this.searchHistory.pop();
					}
				}
				console.log('11')
			},
			onClickHistory(keyword) {
				this.currentInputValue = keyword; // 设置输入框值为被点击的记录
				console.log('点击了历史记录：' + keyword);
			}
		},
		mounted() {
			const savedSearchHistory = JSON.parse(localStorage.getItem('searchHistory'));

			if (Array.isArray(savedSearchHistory)) {
				this.searchHistory = savedSearchHistory;
			} else {
				this.searchHistory = [];
			}
		},
		beforeDestroy() {
			// localStorage.setItem('searchHistory', JSON.stringify(this.searchHistory));
		}
	}
</script>

<style lang="scss">
	.search {
		display: flex;
		justify-content: space-around;
		position: absolute;
		top: 60px;
		left: 10px;
		width: 355px;
		background-color: white;
		border-radius: 13px;
		font-size: 14px;

		input {
			width: 280px;
			height: 30px;
			line-height: 30px;
		}

		image {
			margin-top: 5px;
			width: 20px;
			height: 20px;
		}
	}

	.jl {
		position: absolute;
		top: 95px;
		left: 10px;
		height: 40px;
		color: white;

		.history-list {
			font-size: 12px;

			text {
				margin-left: 10px;
			}
		}
	}

	.md {
		position: relative;
		top: -40px;
		/* 添加底部边距 */

	}

	.info {
		margin: 10px 10px 10px 10px;
		padding: 15px;
		font-size: 13px;
		border-radius: 13px;
		background-color: white;

		.line1,
		.line2 {
			display: flex;
			justify-content: space-between;
			margin-bottom: 8px;
		}

		.line3 {
			display: flex;
			margin-bottom: 8px;

			image {
				border-radius: 10px;
				width: 105px;
				height: 60px;
			}

			.ms {
				height: 20px;
				line-height: 20px;

				.business-hours {
					width: 130px;
				}
			}
		}

	}
</style>